<template>
  <div v-if="!item.hidden">
    <el-submenu v-if="item.child && item.child.length > 0" :index="path">
      <template #title>
        <span slot="title">{{item.name}}</span>
      </template>
      <sub-menu v-for="item2 in item.child" :key="item2.moduleID" :parentPath="path" :item="item2"></sub-menu>
    </el-submenu>

    <el-menu-item :index="path" v-else @click="$router.replace(path)">
      <router-link replace :to="path" class="link">{{item.name}}</router-link>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "sub-menu",
  props: {
    parentPath: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    path() {
      return this.parentPath + "/" + this.item.path;
    },
  },
};
</script>

<style scoped>
.link{
    color:inherit;
    text-decoration: none;
}
</style>